<template>
  <div
    :key="animationKey"
    v-if="isShow"
    class="box"
    :class="{ 'slide-in': shouldShowTips, 'slide-out': !shouldShowTips }"
    ref="animationBox"
  >
    <div class="tips">
      <!-- 准备中 -->
      <div v-if="gameState ==='Prepare'" class="fontgjz">{{$t('zbz')}}</div>
      <!-- 投注开始 -->
      <div v-if="gameState === 'startBet'" class="fontgjz">{{$t('xzz')}}</div>
      <!-- 投注开始 -->
      <div v-if="gameState === 'betTime'" class="fontgjz">{{$t('tzks')}}</div>
      <!-- 游戏结算中 -->
      <div v-if="gameState === 'Settlement'" class="fontgjz">{{$t('jsz')}}</div>
      <!-- 游戏结束 -->
      <div v-if="gameState === 'stopBet'" class="fontgjz">{{$t('yxz')}}</div>
      <!-- 订单结算比如加多少分+1000这种 -->
      <div
        v-if="gameState === 'orderResult' || gameState === 'roomOrderResult'"
        class="fontgjz"
      >{{$t('jsz')}}</div>
      <div class="dian1 com pre">.</div>
      <div class="dian2 com">.</div>
      <div class="dian3 com">.</div>
      <!-- <div
        v-if="gameState === 'orderResult' || gameState === 'roomOrderResult'"
        class="fontgjz"
      >+{{gameResult.winCredit}}</div>
      <div
        v-if="gameState !== 'orderResult' && gameState !== 'roomOrderResult'"
        class="dian1 com pre"
      >.</div>
      <div v-if="gameState !== 'orderResult' && gameState !== 'roomOrderResult'" class="dian2 com">.</div>
      <div v-if="gameState !== 'orderResult' && gameState !== 'roomOrderResult'" class="dian3 com">.</div>-->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ComTips",
  props: {},
  data() {
    return {
      animationKey: 0, // 使用 key 属性来强制重新渲染元素
      isAnimating: false, // 标志位用于判断是否在动画中,
      isShow: false
    };
  },
  computed: {
    ...mapState("websock", ["gameState", "gameResult"]),
    shouldShowTips() {
      return (
        this.gameState !== "orderResult" && this.gameState !== "roomOrderResult"
      );
    }
  },
  watch: {
    gameState(newValue, oldValue) {
      if (newValue !== oldValue) {
        if (newValue !== "betTime") {
          this.isShow = true;
          this.animateTips();
        }
      }
    }
  },
  methods: {
    animateTips() {
      this.isAnimating = true;
      const animationBox = this.$refs.animationBox;
      // 进行存在性检查
      if (animationBox) {
        // 移除 "slide-in" 类
        animationBox.classList.remove("slide-in");
        animationBox.addEventListener(
          "transitionend",
          () => {
            this.isAnimating = false;
            this.animationKey++;
          },
          { once: true }
        );
        // 强制重新计算样式，触发重绘
        void animationBox.offsetWidth;
        // 添加 "slide-in" 类
        animationBox.classList.add("slide-in");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tips {
  width: 105px;
  height: 35px;
  background-image: url(@/assets/images/payOrder/round.png);
  background-size: 105px 35px;
  background-repeat: no-repeat;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  position: relative;
  display: flex;
  overflow: hidden;
  transform: scale(1.4);
}

.slide-in {
  animation: slideInOut 4s forwards; /* 4秒钟的动画，滑入后停留2秒，再滑出 */
}

@keyframes slideInOut {
  0% {
    transform: translateX(-100%);
  }
  33.33% {
    transform: translateX(0);
  }
  66.66% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.tips .com {
  width: 5px;
  line-height: 35px;
}

.tips .fontgjz {
  text-indent: 40px;
  line-height: 35px;
}

.tips .pre {
  margin-left: 3px;
}

/* Your other styles */
</style>
